<template>
	<view class="container">
		<form @submit="formSubmit" @reset="formReset">
			<tui-list-cell :arrow="true" class="tui-list">
				
				<text class="tui-list-cell-name">房号</text>
				<view class="tui-right">
					<picker @change="bindPickerChange" :range="arrayF" :range-key="'name'">
						<view class="uni-input">{{arrayF[index].name}}</view>
					</picker>
				</view>
			</tui-list-cell>
			<tui-list-cell :hover="false"  :arrow="true">
				<view class="tui-line-cell">
					<view class="tui-title">区域</view>
					<view class="tui-right">
							<picker @change="bindPickerChange" :value="index" :range="array">
									<view class="uni-input">{{array[index]}}</view>
							</picker>
					</view>
				</view>
			</tui-list-cell>
			<tui-list-cell :hover="false"  :arrow="true">
				<view class="tui-line-cell">
					<view class="tui-title">预约上门时间</view>
					<view class="tui-right">
						<view class="uni-input" @click="show">{{time}}</view>
					</view>
				</view>
			</tui-list-cell>
			<tui-list-cell :hover="false" ><view class="tui-title tui-top40">问题描述框</view></tui-list-cell>
			<tui-list-cell :hover="false" >
				
					<view class="tui-cells">
						<textarea class="tui-textarea" name="desc" placeholder="请详细描述您的问题,上传图片便于我们更好的解决问题" maxlength="500"
						 placeholder-class="tui-phcolor-color" />
						<view class="tui-textarea-counter">0/500</view>
				</view>
			</tui-list-cell>
			<tui-list-cell :hover="false" ><view class="tui-title tui-top40">图片上传（请点击加号上传）</view></tui-list-cell>
			<tui-list-cell :hover="false">
				<view class="tui-box-upload">
					<tui-upload :serverUrl="serverUrl"  @complete="result" @remove="remove"></tui-upload>
				</view>
			</tui-list-cell>
			<view class="tui-btn-box">
				<tui-button class="tui-btn tui-danger tui-fillet" hover-class="tui-danger-hover" formType="submit">提 交</tui-button>
			</view>
		</form>
		<tui-datetime ref="dateTime" :type="type" :startYear="startYear" :endYear="endYear" :cancelColor="cancelColor" :color="color"
		 :setDateTime="setDateTime" @confirm="change"></tui-datetime>
	</view>
</template>
<script>
	import tuiDatetime from "@/components/dateTime/dateTime"
	const form = require("@/components/utils/formValidation.js")
	import tuiListCell from "@/components/list-cell/list-cell"
	import tuiButton from "@/components/button/button"
	import utils from "@/utils/util.js"
	export default {
		components: {
			tuiListCell,
			tuiDatetime,
			tuiButton
		},
		
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				serverUrl:'',
				type: 1,
				startYear: 1980,
				endYear: 2030,
				cancelColor: "#888",
				color: "#5677fc",
				setDateTime: "",
				result: "",
				title: 'picker',
				arrayF:[{
						name:'恒大',
						val:1
					}, {
						name:'万科',
						val:2,
				}],
				array: ['中国', '美国', '巴西', '日本'],
				index: 0,
				date: currentDate,
				time: '请选择上门时间'
			}
		},
		computed: {
				startDate() {
						return this.getDate('start');
				},
				endDate() {
						return this.getDate('end');
				}
		},
		methods: {
			show: function(type) {
				this.cancelColor = "#888";
				this.color = "#5677fc";
				this.setDateTime = "";
				this.startYear = 1980;
				this.endYear = 2030;
				this.$refs.dateTime.show()
			},
			change: function(e) {
				console.log(e)
				this.time = e.result
			},
			formSubmit: function(e) {
				//表单规则
				let rules = [{
					name: "name",
					rule: ["required", "isChinese", "minLength:2", "maxLength:6"], //可使用区间，此处主要测试功能
					msg: ["请输入姓名", "姓名必须全部为中文", "姓名必须2个或以上字符", "姓名不能超过6个字符"]
				}];
				//进行表单检查
				let formData = e.detail.value;
				let checkRes = form.validation(formData, rules);
				if (!checkRes) {
					uni.showToast({
						title: "验证通过!",
						icon: "none"
					});
				} else {
					uni.showToast({
						title: checkRes,
						icon: "none"
					});
				}
			},
			
			bindPickerChange: function(e) {
					console.log('picker发送选择改变，携带值为', e.target.value)
					this.index = e.target.value
			},
			bindDateChange: function(e) {
					this.date = e.target.value
			},
			bindTimeChange: function(e) {
					this.time = e.target.value
			},
			getDate(type) {
					const date = new Date();
					let year = date.getFullYear();
					let month = date.getMonth() + 1;
					let day = date.getDate();

					if (type === 'start') {
							year = year - 60;
					} else if (type === 'end') {
							year = year + 2;
					}
					month = month > 9 ? month : '0' + month;;
					day = day > 9 ? day : '0' + day;
					return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style>
	.container {
		padding: 20rpx 0 50rpx 0;
	}

	.tui-line-cell {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.tui-title {
		line-height: 32rpx;
		flex-shrink: 0;
	}
	.tui-right {
		margin-left: auto;
		margin-right: 34upx;
		font-size: 26upx;
		line-height: 1;
		color: #999;
	}
	.tui-input {
		font-size: 32rpx;
		color: #333;
		flex: 1;
		text-align: right;
	}
	.picker-lable{
		padding-left: 20rpx;
	}
	.radio-group {
		margin-left: auto;
		transform: scale(0.8);
		transform-origin: 100% center;
		flex-shrink: 0;
	}

	.tui-radio {
		display: inline-block;
		padding-left: 28rpx;
		font-size: 36rpx;
		vertical-align: middle;
	}


	.tui-btn-box {
		padding: 40rpx 50rpx;
		box-sizing: border-box;
	}

	.btn-gray {
		margin-top: 30rpx;
	}

	.tui-tips {
		padding: 30rpx;
		color: #999;
		font-size: 24rpx;
	}
	.btn-primary{
		background: #e41f19;
	}
	uni-textarea{
		width: 700rpx;
	}
</style>
